<template>
	<view class="mainBody">
		<view class="content">
			<view class="item-top">
				<view class="item-left">持卡人</view><input type="text" class="u-input" v-model="params.cardholderName"
					placeholder="请输入持卡人姓名" />
			</view>
			<view class="item">
				<view class="item-left">是否为农行账户</view>
				<view class="u-switch">
					<switch checked color="#FFCC33" v-model="params.abcBank" style="transform:scale(0.7)" @change="switch1Change" />
				</view>
			</view>
			<view class="item">
				<view class="item-left">银行卡号</view><input type="number" class="u-input" v-model="params.cardId"
					placeholder="请输入银行卡号码" />
			</view>
			<view class="item">
				<view class="item-left">收款银行名称</view>
				<view class="item-right" @click="switchBank()">
					<image class="logo" :src="bankLogo" mode="aspectFits"></image>
					<input type="number" class="text" v-model="params.bankType" placeholder="请选择收款银行" />
					<image class="more" src="../../../static/index/more.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="item">
				<view class="item-left">支行信息</view><input type="text" class="u-input" v-model="params.bankInfo"
					placeholder="请输入支行信息" />
			</view>

			<view class="tipMsg">
				<view>温馨提示：</view>
				<view>1.请一定正确填写开户行支行信息，已确保报销款项正常入账。</view>
				<view>2.示例：北京宋家庄支行</view>
			</view>
			<view class="bottomBtnView">
				<view class="submitBtn" @click="nextStep()">下一步
				</view>
			</view>
		</view>
		<bottomPopup ref="bankPopup" :title="bTitle" :placeholder="placeholder" :popup-data="popupData"
			@getSelect="getSelect">
		</bottomPopup>
	</view>
</template>

<script>
	import {getBankName} from '@/api/reimburseApply.js'
	import bottomPopup from '@/components/bottom-popup/index.vue'
	export default {
		components: {
			bottomPopup
		},
		data() {
			return {
				// 收款银行的弹窗层组件传参
				bTitle: '请选择收款银行',
				bankLogo: '',
				popupData:[],
				// popupData: [{
				// 		id: 0,
				// 		src: require("../../../static/img/ABC.png"),
				// 		name: '中国农业银行'
				// 	}, {
				// 		id: 1,
				// 		src: require("../../../static/img/gs.png"),
				// 		name: '中国工商银行'
				// 	}, {
				// 		id: 2,
				// 		src: require("../../../static/img/zg.png"),
				// 		name: '中国银行'
				// 	}, {
				// 		id: 3,
				// 		src: require("../../../static/img/js.png"),
				// 		name: '中国建设银行'
				// 	},
				// 	{
				// 		id: 4,
				// 		src: require("../../../static/img/jt.png"),
				// 		name: '交通银行'
				// 	}, {
				// 		id: 5,
				// 		src: require("../../../static/img/yz.png"),
				// 		name: '中国邮政储蓄银行'
				// 	}, {
				// 		id: 6,
				// 		src: require("../../../static/img/pf.png"),
				// 		name: '浦东发展银行'
				// 	}, {
				// 		id: 7,
				// 		src: require("../../../static/img/zs.png"),
				// 		name: '招商银行'
				// 	}, {
				// 		id: 8,
				// 		src: require("../../../static/img/pa.png"),
				// 		name: '平安银行'
				// 	}, {
				// 		id: 9,
				// 		src: require("../../../static/img/gd.png"),
				// 		name: '广东发展银行'
				// 	},
				// ],
				placeholder: '请输入关键字搜索',

				// 
				params: {
					cardholderName: '',
					abcBank: false,
					cardId: '',
					bankType: '',
					bankInfo: ''
				}
			}
		},
		onLoad(option) {
			if (option) {
				// console.log('查看详情的时候从上级传过来的数据bankMsg:', JSON.parse(decodeURIComponent(option.bankMsg)));
				this.params = JSON.parse(decodeURIComponent(option.bankMsg))
				console.log('params:', this.params);
			}
		},
		methods: {
			// 6212260200177091481
			// 下一步
			nextStep() {
				this.params.abcBank = this.params.abcBank === false ? 0 : 1
				uni.navigateTo({
					url: "/pages/travelService/reimburse/confirmReimburseAccount?item=" + encodeURIComponent(JSON
						.stringify(this.params)),
				})
			},
			// 选择收款银行
			switchBank() {
				getBankName().then(res=>{
					this.popupData = res[1].data
				})
				this.$refs.bankPopup.open()
			},
			getSelect(val) {
				// console.log('获取子组件传过来的值:', val);
				this.params.bankType = val.shortName
				this.bankLogo = val.src
			},
			switch1Change(e){
				this.params.abcBank = e==this.params.abcBank?this.params.abcBank:!this.params.abcBank
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBody {
		background: #f7f7f7;
		min-height: 100%;
	}

	.content {
		min-height: 100%;
		padding-top: 20rpx;
	}

	.item-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		top: 20rpx;
		height: 90rpx;
		background-color: #fff;
		font-size: 32rpx;

		.item-left {
			font-weight: 400;
			color: #333333;
			padding-left: 32rpx;
		}

		.u-input {
			width: 280rpx;
			min-height: 40rpx;
			line-height: 40rpx;
			padding-right: 32rpx;
		}
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		height: 90rpx;
		background-color: #fff;
		font-size: 32rpx;

		.item-left {
			font-weight: 400;
			color: #333333;
			padding-left: 32rpx;
		}

		.u-input {
			width: 280rpx;
			min-height: 40rpx;
			line-height: 40rpx;
			padding-right: 32rpx;
		}

		.item-right {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.logo {
				width: 36rpx;
				height: 36rpx;
			}

			.text {
				width: 280rpx;
				min-height: 40rpx;
				line-height: 40rpx;
			}

			.more {
				height: 28rpx;
				width: 16rpx;
				margin-right: 20rpx;
			}
		}
	}

	.tipMsg {
		height: 160rpx;
		padding: 32rpx 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 45rpx;
		word-wrap: break-word;
		word-break: normal;
	}

	.bottomBtnView {
		position: fixed;
		bottom: 0;
		background: #fff;
		height: 154rpx;
		width: 750rpx;

		.submitBtn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			background: #FFA900;
			// background: #FFE6B2;
			border-radius: 8rpx
		}

		.active-btn {
			background: #FFA900 !important;
		}
	}
</style>
